<template>
  <div>
    <div class="user-nav">
      <el-input
        placeholder="请输入内容"
        v-model="keyword"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
      <el-button type="primary" @click="showLog = true">添加</el-button>
    </div>

    <el-table :data="userList" border style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>

      <el-table-column prop="username" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="120"> </el-table-column>
      <el-table-column prop="mobile" label="电话号码" width="120">
      </el-table-column>
      <el-table-column prop="role_name" label="角色" width="300">
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row.id, scope.row.mg_state)"
          >
            <!-- 切换状态的时候把id和状态都传下去 -->
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="remove(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- editId == -1 ? '添加' : '编辑' 如果编辑的id是-1就证明现在没有编辑 是添加的状态 否则就是编辑 -->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 分页器 -->
    <!-- total属性 代表总共多少条 -->
    <!-- page-sizes是一个数组 代表可以选择的每页多少条 -->
    <!-- layout="total, sizes, prev, pager, next, jumper" 代表分页器的布局 需要什么写什么 分别代表 总数 页数的选择 上一页 页码 下一页 跳转到第几页 -->
    <!-- :current-page="params.pagenum" 现在是第几页
    :page-size="params.pagesize" 每页多少条 -->
    <!-- @size-change="handleSizeChange" 切换每页多少条的时候触发 -->
    <!-- @current-change="handleCurrentChange"这个事件是切换页码的时候触发 -->

    <el-dialog :title="editId == -1 ? '添加' : '编辑'" :visible.sync="showLog">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            autocomplete="off"
            :disabled="editId == -1 ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="editId == -1 ? true : false"
          label="密码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showLog = false">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加用户的模态框 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      //定义要请求数据时候的参数 搜索关键字是空 页码是1 每页10条
      userList: [],
      //用户列表
      showLog: false,
      //显示弹框
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      //弹出框的数据
      formLabelWidth: "100px",
      //弹出框label的宽度
      editId: -1,
      //保存当前编辑的数据的id
      keyword: "",
      //搜索关键字
      total: 0,
      //总数
    };
  },
  methods: {
    getUsers() {
      this.$axios.get("/users", { params: this.params }).then((res) => {
        console.log(res);
        this.userList = res.data.data.users;
        this.total = res.data.data.total;
      });
    },
    //获取用户数据
    submitUser() {
      if (this.editId == -1) {
        this.$axios.post("/users", this.form).then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.$message({
              message: "恭喜你，添加成功",
              type: "success",
            });
          }
        });
        //添加
      } else {
        // this.$axios.put("/users/"+this.editId);
        this.$axios
          .put(`/users/${this.editId}`, {
            id: this.editId,
            email: this.form.email,
            mobile: this.form.mobile,
          })
          .then((res) => {
            console.log(res);
            if (res.data.meta.status == 200) {
              this.$message({
                message: "恭喜你，编辑成功",
                type: "success",
              });
              this.editId = -1;
              //编辑完成后变成添加
            }
          });
      }
      //请求编辑接口

      this.showLog = false;
      this.form = {
        username: "",
        password: "",
        email: "",
        mobile: "",
      };
      //并且把form清空
      this.getUsers();
      //重新获取数据
    },
    //添加和编辑用户
    edit(row) {
      this.editId = row.id;
      this.showLog = true;
      this.form.username = row.username;
      this.form.mobile = row.mobile;
      this.form.email = row.email;
    },
    //编辑方法

    search() {
      this.params.query = this.keyword;
      this.getUsers();
    },
    //搜索 还是用获取用户列表的接口
    remove(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.delete(`/users/${id}`).then((res) => {
            if (res.data.meta.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getUsers();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除

    changeState(id, val) {
      console.log(id, val);
      this.$axios.put(`users/${id}/state/${val}`).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success",
            message: "状态更新成功!",
          });
        }
      });
    },
    //切换状态时触发

    handleSizeChange(val) {
      console.log("现在每页" + val + "tiao");
      this.params.pagesize = val;
      //把当前每页多少条存在params
      this.getUsers();
      //重新获取数据
    },
    //这个事件在切换了每页多少条的时候触发  默认的参数是每页多少条
    handleCurrentChange(val) {
      console.log("现在是第几页" + val);
      this.params.pagenum = val;
      //把当前的页码存下来
      this.getUsers();
      //重新获取数据
    },
    //这个事件 切换页码的时候触发 默认的参数是第几页
  },
  created() {
    this.getUsers();
  },
};
</script>
<style lang="scss" scoped>
.user-nav {
  display: flex;
  width: 60%;
  margin: 20px 0;
}
</style>
